<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>模板</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <script src="../js/vue.js"></script>
  <script src="../js/jquery-1.11.3.min.js"></script>
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/common.css">
  <!-- 引入对应模块的css -->
  <link rel="stylesheet" href="../css/parmsErwm-create.css">
  <style>
     .ceshiLI{
       width:100%;
        column-count: 4;
        /* column-gap: 50px;  */
     }
    .ceshiLI div{
    
      border: 1px solid red;
     width:220px;
    position: relative;
    /* display: inline-block; */
    break-inside: avoid; 
    }
    .ceshiLI div img{
      width:100%;
      height: 100%;
    }
    .ceshiLI div p{
     
      margin-top: 20px;
    }
    
  /* .masonry { display: flex; flex-direction: row;width:100%; flex-wrap: wrap;}
.column { display: flex; flex-direction: column; width: calc(100%/3); }
.column img{
  width:100%;
} */
.media-pic{
  width: 220px;
    font-size: 12px;
    color: #797979;
    border: 1px solid rgba(242, 242, 242, 1);
    border-top: 0px;
    border-radius: 5px;
    padding-bottom: 10px;
    margin: 10px 20px;
    display: inline-block;
}
.media-pic > div:nth-child(1) img {
    width: 220px;
    height: 150px;
    border-radius: 5px;
}
.media-pic > div:nth-child(2){
    padding:10px;
    display:flex;
    justify-content:space-between;
}
.media-pic > div:nth-child(2) label{
  width:calc(100% - 24px);
  cursor: pointer;
}
input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
.media-pic > div:nth-child(2) label span{
  display:inline-block;

}
.media-pic > div:nth-child(2) img{
  width: 21px;
    height: 21px;
}
input[type="checkbox"] + span::before {
	content: "\a0";		/*不换行空格*/
	display: inline-block;
	vertical-align: text-top;
	margin-right: 5px;
	border: 1px solid #D7D7D7;
	border-radius: 3px;
  width: 12px;
	height: 12px;
	background-clip: content-box;
  transition: all 0.3s
}
input[type="checkbox"]:checked + span::before {
	width: 12px;
	height: 12px;
	background-clip: content-box;
  background: #fff url('../img/selectSuccess.png') no-repeat center;
  background-size: 80%;
  /* padding: 2px; */
  border: 1px solid #337AB7;
}

  </style>
</head>
<body>
    <div id="app">
        <!-- 头部 -->
        <top-bar ref="topbar"></top-bar>
        <!-- 开始 -->
        <div class="displayCenter">
            <!-- 左边导航 -->
            <div class="leftBox"> <left-site></left-site></div>
            <div class="pageContent fffBackground">
               <section class="title-weizhi">您当前所在的位置：公众号名称>公众号信息</section>

               <section class="ceshiLI">
                  <div v-for="imgs in list">
                    <img :src="imgs.img" />
                    <p>{{imgs.title}}</p>
                  </div>
               </section>
                <!-- <section class="media-pic">
                  <div>
                    <img src="../img/u150.png" />
                  </div>
                  <div>
                    <label for="1">
                      <input type="checkbox" id="1" /> <span class="ellipsis1">111111111111111111111111111</span>
                    </label>
                    <img src="../img/yinpinDialog2.png" />
                  </div>
                </section> -->

            </div>
        </div>
        <section class="commonMarsk" v-if="dialogShow">
          <tip-dialog ref="tipDialog" :dialogdata='dialogdata' v-if="dialogShow" @close="closeDialog" :leftbtnhandler="leftBtnHandler" :rightbtnhandler="rightBtnHandler"></tip-dialog>
        </section>
      </div>   


</body>
<!-- 头部 -->
<script src="../common/top-bar.js"></script>
<!-- 左侧导航栏 -->
<script src="../common/left-site.js"></script>
<!-- 提示弹窗 -->
<script src="../common/dialog.js"></script>
<script src="../js/public.js"></script>
<script>
    
    new Vue({
        el: '#app',
        data: {
          dialogdata: null,
          dialogShow:false,
          list:[
            {img:"../img/u150.png",title:"ccccccc"},
            {img:"../img/u372.png",title:"222ccccc"},
            {img:"../img/u374.png",title:"ccccccc"},
            {img:"../img/u497.png",title:"ccccccc"},
            {img:"../img/tuwensucai.png",title:"ccccccc"},
            {img:"../img/adminZuma.png",title:"ccccccc"},

            {img:"../img/authList02.png",title:"ccccccc"},
            {img:"../img/weixinHead.png",title:"ccccccc"},
            {img:"../img/adminZuma.png",title:"ccccccc"},
            {img:"../img/authList02.png",title:"ccccccc"},
            {img:"../img/authList02.png",title:"ccccccc"},
            {img:"../img/authList02.png",title:"ccccccc"},

{img:"../img/authList02.png",title:"ccccccc"},
{img:"../img/weixinHead.png",title:"ccccccc"},
          ]
        },
        created:function() {
            //public.ceshi()
        },
        mounted:function() {
            //this.$refs['topbar'].ce();
           
        },
        methods: {
          copy:function(eve){
            //console.log($(eve.target).prev('input').val());
            var copyInput=$(eve.currentTarget).prev('input');
            copyInput.select();
            document.execCommand("Copy");
            alert("已复制 ["+$(eve.target).prev('input').val()+"]，可贴粘");
          },
          unBind:function(){//打开提示弹框
              this.dialogdata={
                content:'请前往微信公众平台取消授权。',
                btnLeft:'好的',
                btnRight:'查看教程'
              }
              this.dialogShow = true;
              console.log(this.dialogdata,'dd')
              //this.$refs['tipDialog'].isShow = true;
          },
          closeDialog:function(v){//关闭弹框
            
                this.dialogShow = v;
          },
          leftBtnHandler:function(){//左边按钮的事件方法
            this.dialogShow = false;
              alert('左边按钮的触发事件')
          },
          rightBtnHandler:function() {//左边按钮的事件方法
             alert('右边边按钮的触发事件')
          }
        },
    })
</script>

</html>